<template>
  <div id="pie">
    <div class="pie">
      <div id="pieChart"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, markRaw } from "vue";
import * as echarts from "echarts";
let pieChart = ref(); //定义元素
onMounted(() => {
  // 绘制图表
  pieChart.value = markRaw(
    echarts.init(document.querySelector("#pieChart") as HTMLElement)
  );
  pieChart.value.setOption({
    tooltip: {
      show: false
    },
    legend: {
      bottom: "5%",
      textStyle: {
        color: "white",
      },
    },
    series: [
      {
        type: "pie",
        radius: ["50%", "75%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "14",
            fontWeight: "bold",
            formatter: "{d}%\n{b}",
            color: "white",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ],
        bottom:"35%"
      },
    ],
  });

  window.addEventListener("resize", function () {
    pieChart.value.resize();
  });
});
</script>

<style lang="less" scoped>
#pie {
  width: 100%;
  height: 100%;
  .pie {
    width: 95%;
    height: 100%;
    margin: 0 auto;
    #pieChart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
